<style>

    /* 页面标题区 */
    .page-header {
        background-color: var(--primary-light);
        padding: 4rem 0 3rem;
        margin-bottom: 3rem;
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e63946' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        z-index: 0;
    }

    .page-header .header-content {
        position: relative;
        z-index: 1;
    }

    .page-header .page-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--secondary);
        margin-bottom: 0.5rem;
    }

    .page-header .page-description {
        font-size: 1.1rem;
        color: var(--gray);
        max-width: 700px;
    }

    /* 联系表单区域 */
    .contact-section {
        margin-bottom: 4rem;
    }

    .contact-section .section-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--secondary);
        margin-bottom: 1.5rem;
        padding-bottom: 0.8rem;
        border-bottom: 3px solid var(--primary-light);
        display: inline-block;
    }

    .contact-section .contact-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        padding: 2.5rem;
        height: 100%;
        transition: var(--transition);
    }

    .contact-section .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .contact-section .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--secondary);
    }

    .contact-section .form-control {
        padding: 0.9rem;
        border: 1px solid var(--light-gray);
        border-radius: 8px;
        transition: var(--transition);
    }

    .contact-section .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
        outline: none;
    }

    .contact-section .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        padding: 0.9rem 2rem;
        font-weight: 500;
        border-radius: 8px;
        transition: var(--transition);
    }

    .contact-section .btn-primary:hover {
        background-color: #d62828;
        border-color: #d62828;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
    }

    /* 联系信息 */
    .contact-info {
        margin-bottom: 2rem;
    }

    .contact-info .info-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 1.5rem;
    }

    .contact-info .info-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.2rem;
    }

    .contact-info .info-content h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.3rem;
        color: var(--secondary);
    }

    .contact-info .info-content p {
        color: var(--gray);
        margin-bottom: 0;
    }

    /* 社交媒体链接 */
    .social-links {
        display: flex;
        gap: 15px;
        margin-top: 2rem;
    }

    .social-links .social-link {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: var(--light-gray);
        color: var(--gray);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: var(--transition);
    }

    .social-links .social-link:hover {
        background-color: var(--primary);
        color: white;
        transform: translateY(-3px);
    }

    /* 常见问题 */
    .faq-section {
        margin-bottom: 4rem;
    }

    .faq-section .accordion-item {
        border: 1px solid var(--light-gray);
        border-radius: 8px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .faq-section .accordion-header {
        background-color: white;
    }

    .faq-section .accordion-button {
        font-weight: 600;
        padding: 1.2rem 1.5rem;
        color: var(--secondary);
        background-color: white;
        border: none;
        box-shadow: none;
    }

    .faq-section .accordion-button:not(.collapsed) {
        color: var(--primary);
        background-color: white;
        box-shadow: none;
    }

    .faq-section .accordion-button::after {
        color: var(--primary);
    }

    .faq-section .accordion-body {
        padding: 0 1.5rem 1.2rem;
        color: var(--gray);
    }

    /* 地图区域 */
    .map-section {
        margin-bottom: 4rem;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .map-section .map-container {
        height: 400px;
        background-color: #f1f1f1;
        position: relative;
    }

    .map-section .map-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        color: var(--gray);
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .page-header .page-title {
            font-size: 2rem;
        }

        .contact-section .contact-card {
            padding: 1.5rem;
        }

        .map-container {
            height: 300px;
        }
    }
</style>


<!-- 页面标题区 -->
<section class="page-header">
    <div class="container">
        <div class="header-content">
            <h1 class="page-title">联系我们</h1>
            <p class="page-description">
                无论您有任何问题、建议或合作意向，都可以通过以下方式与我们取得联系，我们将尽快回复您。
            </p>
        </div>
    </div>
</section>

<!-- 联系表单和信息 -->
<section class="contact-section">
    <div class="container">
        <div class="row gap-lg-6">
            <!-- 联系表单 -->
            <div class="col-lg-7">
                <div class="contact-card">
                    <h2 class="section-title">发送消息</h2>
                    <form>
                        <div class="row gap-4">
                            <div class="col-md-6">
                                <label for="name" class="form-label">您的姓名</label>
                                <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label">电子邮箱</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱地址">
                            </div>
                            <div class="col-12">
                                <label for="subject" class="form-label">主题</label>
                                <input type="text" class="form-control" id="subject" placeholder="请输入消息主题">
                            </div>
                            <div class="col-12">
                                <label for="message" class="form-label">您的消息</label>
                                <textarea class="form-control" id="message" rows="5"
                                          placeholder="请详细描述您的问题或建议..."></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> 发送消息
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 联系信息 -->
            <div class="col-lg-5">
                <div class="contact-card">
                    <h2 class="section-title">联系方式</h2>
                    <div class="contact-info">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="info-content">
                                <h3>公司地址</h3>
                                <p>北京市朝阳区建国路88号红包大厦15层</p>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="info-content">
                                <h3>联系电话</h3>
                                <p>400-888-9999</p>
                                <p>工作时间: 周一至周五 9:00-18:00</p>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="info-content">
                                <h3>电子邮箱</h3>
                                <p>support@hongbaosheqiao.com</p>
                                <p>service@hongbaosheqiao.com</p>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-headphones"></i>
                            </div>
                            <div class="info-content">
                                <h3>在线客服</h3>
                                <p>工作日 9:00-21:00</p>
                                <p>周末及节假日 10:00-18:00</p>
                            </div>
                        </div>
                    </div>

                    <h3 class="mb-3">关注我们</h3>
                    <div class="social-links">
                        <a href="#" class="social-link" title="微信">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="social-link" title="微博">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="social-link" title="抖音">
                            <i class="fab fa-tiktok"></i>
                        </a>
                        <a href="#" class="social-link" title="QQ">
                            <i class="fab fa-qq"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 常见问题 -->
<section class="faq-section">
    <div class="container">
        <h2 class="section-title">常见问题</h2>
        <div class="accordion" id="faqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                        如何领取和使用红包？
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        您可以在红包广场浏览各类红包，点击"领取"按钮即可获取。领取成功后，红包将存入您的账户中。使用时，在支持该红包的商家消费时，出示红包核销码即可享受相应优惠。不同红包有不同的使用规则，请留意红包详情页的说明。
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        红包过期了可以补发吗？
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        很抱歉，红包一旦过期将无法使用且不予补发。建议您在领取红包后注意查看有效期，并在有效期内使用。您可以在"我的红包"页面设置红包到期提醒，避免错过使用时间。
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        如何成为平台的红包发布商家？
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        商家可以通过平台的"商家合作"通道提交入驻申请，我们会在3个工作日内进行审核。审核通过后，您需要完成企业认证并签署合作协议，之后即可发布红包活动。如有疑问，可联系我们的商务合作邮箱：business@hongbaosheqiao.com。
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        如何举报违规红包或评论？
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        对于违规红包，您可以在红包详情页点击右上角的"举报"按钮进行投诉；对于违规评论，您可以点击评论下方的"举报"选项。我们会在24小时内处理您的举报，并根据情况采取相应措施。感谢您对平台环境的维护。
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 地图位置 -->
<section class="map-section">
    <div class="container p-0">
        <div class="map-container">
            <div class="map-placeholder">
                <i class="fas fa-map-marked-alt fa-3x mb-3"></i>
                <p>地图加载中，请稍候...</p>
                <p class="text-sm">实际应用中此处将显示公司位置地图</p>
            </div>
        </div>
    </div>
</section>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 表单提交处理
		const contactForm = document.querySelector('form');
		contactForm.addEventListener('submit', function (e) {
			e.preventDefault();

			// 获取表单数据
			const name = document.getElementById('name').value.trim();
			const email = document.getElementById('email').value.trim();
			const subject = document.getElementById('subject').value.trim();
			const message = document.getElementById('message').value.trim();

			// 简单验证
			if (!name || !email || !subject || !message) {
				alert('请填写完整的表单信息');
				return;
			}

			// 模拟提交
			const submitBtn = contactForm.querySelector('button[type="submit"]');
			const originalText = submitBtn.innerHTML;

			submitBtn.disabled = true;
			submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发送中...';

			setTimeout(() => {
				alert('您的消息已成功发送，我们将尽快回复您！');
				contactForm.reset();
				submitBtn.disabled = false;
				submitBtn.innerHTML = originalText;
			}, 1500);
		});

		// 模拟地图加载
		setTimeout(() => {
			const mapPlaceholder = document.querySelector('.map-placeholder');
			if (mapPlaceholder) {
				mapPlaceholder.innerHTML = `
                        <img src="https://picsum.photos/id/1031/1200/400" alt="公司位置地图" style="width:100%;height:100%;object-fit:cover;">
                    `;
			}
		}, 2000);
	});
</script>

    
